<template>
  <div class="articleList">
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isRefreshing"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!--
        1. van-list 自带上拉加载 和 下拉刷新的功能
        2. 原理:
          (1) 数据项在 list 中
          (2) 在显示数据时, 如果当前数据内容不够一屏幕, 会自动调用 onLoad 方法
              - 在onLoad中, 需要通过ajax取回数据, 添加到 list 中
              - 加载完, 需要将 loading 手动设置为 false
              - 判断是否所有的数据都已经加载完成, 如果是, 将finished改成 true
          (3) 如果是往上滑动, 且finished不为true, 一旦快要触底, 也会自动调用onLoad
      -->
      <!-- 参考官网的写法 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="你太强了，我已经满足不了你了"
        @load="onLoad"
      >
        <!-- 使用单元格来展示文章列表 -->
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :title="item.title"
          @click="$router.push('/article/'+item.art_id.toString())"
        >
          <!-- van-cell中的插槽label，整体包裹cell，展示标题下方的描述信息 -->
          <template #label>
            <!--
                宫格，可以展示文字、图标、图片、页面导航、徽标提示等
                默认一行展示四个格子，可以通过 column-num 自定义列数(这里根据文章图片的个数来决定)
            -->
            <!-- 这里使用图片功能 -->
            <!-- <van-grid :column-num="item.cover.type" v-if="JSON.stringify(item.cover)!=='{}' && item.cover.type>=1">-->
            <!--
              Object.prototype.hasOwnProperty.call(item.cover, 'images')判断item.cover里面是否存在images属性
              因为🐶后端接口，当对象没数据的时候，连对象都不给
            -->
            <van-grid :column-num="item.cover.type" v-if="JSON.stringify(item.cover)!=='{}' &&
            Object.prototype.hasOwnProperty.call(item.cover, 'images')">
              <van-grid-item v-for="(img,index) in item.cover.images" :key="index">
                <!-- 图片懒加载处理 -->
                <van-image lazy-load :src="img"/>
              </van-grid-item>
            </van-grid>

            <!-- 文章内容部分 -->
            <div class="meta">
              <span>yoyo</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate  | relative }}</span>
              <!-- 只有登录的用户，才能看见这个 x 按钮 -->
              <span class="close"
                    v-if="tokenInfo.token"
                    @click="closeMethod(item)">
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>

    </van-pull-refresh>
  </div>
</template>

<script>
  import { reqGetArticleList } from '@/api/channels.js'
  // 引入vuex中的mapState辅助函数，获取vuex中的state里的属性
  import { mapState } from 'vuex'

  export default {
    name: 'articleList',
    props: ['channel'],
    data () {
      return {
        // 加载
        loading: false,
        // 是否结束加载
        finished: false,
        // 文章列表
        list: [],
        timestamp: '',
        // 是否在下拉刷新中...
        isRefreshing: false
      }
    },
    // 本页面的计算方法
    computed: {
      // 获取指定的user.js的state下的tokenInfo值
      ...mapState('user', ['tokenInfo'])
    },
    methods: {

      // van-list的加载执行方法,在finished没有true之前，上滑页面会一直调用（方法名自定义的）
      async onLoad () {
        // 异步更新数据
        // console.log('当前数据的条数', this.list.length, '加载新数据')

        if (!this.timestamp) {
          // 初始化时间戳为当前时间
          this.timestamp = +new Date()
        }

        // 调用接口，传入当前频道id、当前时间戳
        const res = await reqGetArticleList(this.channel.id, this.timestamp)
        // 频道数组对象
        const arr = res.data.data.results
        // console.log(res.data.data.results)
        // this.list = results 不能做数组的赋值, 而应该追加数组(展开追加)
        // this.list.push(...results)
        // 1.将两个数组合并，赋值给list
        this.list = [...this.list, ...arr]
        // 频道接口返回的时间戳，用于下一次请求
        this.timestamp = res.data.data.pre_timestamp
        // 2.loading改为false
        this.loading = false
        // 3.判断是否加载完了，将finished改为true
        if (arr.length === 0) {
          this.finished = true
        }
      },
      // 下拉刷新
      async onRefresh () {
        // 1.获取最新文章的时间戳(传入id，和最新的系统时间戳)
        const res = await reqGetArticleList(this.channel.id, +new Date())
        // 2.保存时间戳, 以便加载下一页传入
        this.timestamp = res.data.data.pre_timestamp
        // 3.将本次数据直接覆盖到list中
        this.list = res.data.data.results
        // 4.页面提示获取成功
        this.$toast.success('刷新成功')
        // 5.结束刷新状态
        this.isRefreshing = false
      },
      // 关闭方法
      closeMethod (item) {
        // console.log(item)
        // 点击x时，子传父触发事件,将参数传递给父组件
        // $emit('show-more'）就是为了当父组件在某一标签上使用@show-more时，
        // 子组件实现控制父组件的标签，及标签里的所有方法
        // true：展示遮罩层
        // art_id：默认是BigNumber属性，转成String来存储
        // this.channel：index父组件传递给当前子组件的，用props接收的，可直接使用
        this.$emit('show-more', true, item.art_id.toString(), this.channel.id)
      },
      // 过滤不喜欢的文章
      filterList (id) {
        this.list = this.list.filter(e => e.art_id.toString() !== id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .articleList {
    .meta {
      width: 100%;

      span {
        margin-right: 10px;
      }

      .close {
        // 靠最右边
        float: right;
        margin: 4px;
      }
    }
  }

</style>
